<template>
  <div class="material-list-item">
    <div class="icon">
        <img src="@/assets/file-types/folder.png" />
    </div>
    <div class="name" :title="title">{{title}}</div>
    <div v-if="false" class="price">￥{{price}}</div>
    <div class="tag">{{tag}}</div>
    <div class="operation">
        <a-button shape="round" @click="doDownload" danger>{{buttonLabel}}</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MaterialListItem',
  props: {
    icon: String,
    title: String,
    price: String,
    tag: {
        type: String,
        default: '限时免费'
    },
    buttonLabel: {
        type: String,
        default: '立即下载'
    },
  },
  data () {
    return {
    }
  },
  methods: {
    doDownload() {
        this.$emit('onDownload');
    }
  }
}
</script>

<style lang="less" scoped>
.material-list-item {
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    background: transparent;
    display: flex;

    .icon {
        width: 32px;
        height: 32px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .name {
        flex: 1;
        width: 378px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        font-weight: 500;
        color: @font-black;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 12px;
        margin-right: 46px;
    }

    .price {
        width: 53px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: @font-grey-light;
        text-decoration: line-through;
        margin-left: 4px;
    }

    .tag {
        width: 74px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: @red-light;
        margin-left: 4px;
    }

    .operation {
        width: 88px;
        margin-left: 30px;
    }

    :deep(.ant-btn-default.ant-btn-dangerous) {
        color: @red;
        border-color: @red;
    }

    :deep(.ant-btn) {
        height: 32px;
        padding: 5px 12px;

        &.ant-btn-round {
            border-radius: 16px;
            padding-inline-start: 11px;
            padding-inline-end: 11px;
        }
        >span {
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
        }
    }
    
}
</style>
